<template>
  <div>
    <template>
      <!-- <div>{{ obj.content }}</div> -->
      <div class="msg" v-if="obj.msgType === 'text'">
        <div class="word">
          {{ obj.content }}
        </div>
      </div>
      <div class="msg" v-if="obj.msgType === 'image'">
        <div class="image">
          <img :src="obj.picUrl" />
        </div>
      </div>
      <div class="msg" v-if="obj.msgType === 'link' && !obj.appId">
        <div class="word-and-image">
          <div>
            {{ obj.title }}
          </div>
          <div class="sub-content">
            <div class="digest">
              {{ obj.linkUrl }}
            </div>
            <div style="flex-shrink: 0;">
              <img src="../assets/default_icon.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="msg" v-if="obj.msgType === 'link' && obj.appId">
        <div class="word-and-image">
          <div>
            {{ obj.title }}
          </div>
          <div class="sub-content">
            <div class="digest">
              {{ obj.linkUrl }}
            </div>
            <div style="height: 70px; flex-shrink: 0;">
              <img style="height: 70px; width: 70px;" src="../assets/default_icon.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="msg" v-if="obj.msgType === 'video'">
        <div class="word-and-image">
          <div>
            {{ obj.title }}
          </div>
          <div class="sub-content">
            <div class="digest">
              {{ obj.description }}
            </div>
            <div style="height: 70px; flex-shrink: 0;">
              <!-- <video style="height: 70px; width: 70px;" :src="obj.linkUrl" /> -->
              <img style="height: 70px; width: 70px;" :src="obj.picUrl" />
            </div>
          </div>
        </div>
      </div>
      <div class="msg" v-if="obj.msgType === 'file'">
        <div class="word-and-image">
          <div>
            {{ obj.title }}
          </div>
          <div class="sub-content" style="min-width: 100px;">
            <div class="digest">
              {{ obj.description }}
            </div>
            <div>
              <svg-icon class="svg" :name="obj.linkUrl ? filType(obj.linkUrl) : ''" v-if="obj.linkUrl"></svg-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="msg" v-if="obj.msgType === 'miniprogram'">
        <div class="miniprogram">
          <div class="mini-header"><img src="../assets/miniprogram-icon.png" alt="" /> {{ obj.materialName }}</div>
          <img class="mini-img" :src="obj.picUrl" />
          <div class="mini-footer"><img src="../assets/miniprogram-link.png" /> 小程序</div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'show-send-info',
    props: {
      obj: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    methods: {
      filType(file) {
        let filecontent = JSON.parse(JSON.stringify(file))
        filecontent = filecontent.split('.')
        let type = filecontent[filecontent.length - 1]
        if (type === 'pdf') {
          return 'pdf'
        } else if (type === 'doc' || type === 'docx') {
          return 'word'
        } else if (type === 'xls' || type === 'xlsx') {
          return 'excel'
        } else if (type === 'ppt' || type === 'pptx' || type === 'pps' || type === 'pptsx') {
          return 'ppt'
        } else {
          return ''
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .svg {
    height: 70px;
    width: 70px;
  }
  .msg {
    width: 100%;
    position: relative;
    min-height: 26px;
    background: #f6faff;
    border: 1px solid #f6faff;
    display: inline-block;
    border-radius: 4px;
    box-sizing: border-box;
    word-break: break-all;
    .word {
      padding: 5px 12px;
    }
    .image {
      padding: 12px;
      img {
        width: 94px;
        height: 90px;
      }
    }

    .word-and-image {
      padding: 12px;
      .sub-content {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        height: 75px;
        .digest {
          line-height: 15px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
        img {
          // flex-shrink: 0;
          height: 40px;
          width: 40px;
        }
      }
    }
    .miniprogram {
      padding: 12px;
      .mini-header {
        display: flex;
        align-items: center;
        img {
          height: 18px;
          width: 18px;
          margin-right: 5px;
        }
      }
      .mini-img {
        margin: 10px 0;
        width: 143px;
        height: 120px;
      }
      .mini-footer {
        display: flex;
        align-items: center;
        img {
          height: 14px;
          width: 14px;
          margin-right: 5px;
        }
      }
    }
  }
</style>
